<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一个测试页面</title>

  <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>

<body>
1jiji@live.cn
<div id="box1" class="ap"></div>
<div id="box2" class="ap"></div>
<p>1qaz2wsx3edc</p>
<input id="in" name="input1" value="sunck is a good man !">


<script type="text/javascript">
  /* 1,简单使用 */
  $(document).ready(function () {
    alert("all work well")
  })
  window.onload = function(){
    alert("second things")
  }
  alert("first things")
   /* 2,设置style */
  /* 这是原来DOM对象的写法 */
  var jsdiv = document.getElementById("box1")
  console.log(jsdiv)
  /* 这是jQuery对象的写法 */
  // var $jqdiv = $("#box1").html("sunck is a good man")
  var $jqdiv = $("#box1")


  /* 两种对象互相转换jQuery-->DOM */
  var jsdiv1 = $jqdiv[0]
  console.log($jqdiv)
  console.log(jsdiv1)/* 现在jsdiv1就是一个div标签了*/
  /* jQuery--->DOM另一种转换方式*/
  var jsdiv2 = $jqdiv.get(0)
  console.log(jsdiv2)

   /* 两种对象互相转换DOM-->jQuery */
  var $jqdiv1 = $(jsdiv1)
  console.log($jqdiv1)

  /* 获取到所有的div，对div的设置就是对所有div的设置 */
  var jqdivs = $("div")
  jqdivs.html("12345")

  var jqdiv2 = $(".ap")
  console.log(jqdiv2)
  console.log(jqdiv2===jqdivs)

  /* 同时选择两种元素*/
  var com = $(".ap,p")
  console.log(com)

    /* 同时选择两种元素*/
  var com1 = $("*")
  console.log(com1)

  var conp = $("p:contains('2ws')")
  console.log("conp:",conp)

  var $in1 = $("input:visible")
  /* 没有参数就是获取，有参数就是设置 */
  console.log($in1.val("qqqqqqqqq"))
  console.log($in1.val())

  var $input1 = $("input[name]")
  console.log("input1:",$input1)


</script>


</body>

</html>
